<script setup lang="ts">
import { reactive, watch } from 'vue'
const user = reactive({
  name: 'tom',
  info: {
    gender: '男',
    age: 18
  }
})

// 2. 监听对象中属性的变化
// watch(() => user.info.age, (newValue, oldValue) => {
//   console.log(`新值: ${newValue}, 旧值: ${oldValue}`)
// })

// setInterval(() => {
//   user.info.age++
// }, 2000);

// 3. 监听对象中多个属性变化
// watch(() => user.info.age, (newValue, oldValue) => {
//   console.log(`新值: ${newValue}, 旧值: ${oldValue}`)
// })

// watch(() => user.info.gender, (newValue, oldValue) => {
//   console.log(`新值: ${newValue}, 旧值: ${oldValue}`)
// })

// -----------------对整个对象进行侦听
watch(
  () => user.info,
  (newValue) => {
    console.log(newValue)
  },
  {
    // 深度侦听
    deep: true,
    // 一进入就执行一次回调函数
    immediate: true
  }
)

// setInterval(() => {
//   user.info.age++
// }, 2000);
</script>

<template>
  <p>姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}</p>
  <button @click="user.info.gender = '女'">修改性别</button>
</template>
